<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div">
         <!-- 遍历数组 -->
         <!-- v-for:类似于js中 for .. in ... -->
        <ul>
            <!-- 遍历arr中每一个元素，并将其逐个渲染出来 -->
            <li v-for="item in arr ">{{item}}</li>
            <li v-for="(item,index) in arr ">{{index}} - {{item}}</li>
        </ul>

        <!-- 遍历对象 -->
        <p v-for="val in obj">{{val}}</p>
        <p v-for="(val,key) in obj">{{key}}:{{val}}</p>
        <p v-for="(val,key,index) in obj">{{index}} - {{key}}:{{val}}</p>
        
        <!-- 遍历字符串 -->
        <span v-for="c in str">{{c}}</span>

        <!-- 分页 -->
        <a href="#" v-for="num in 10" style="margin-left: 10px;">{{num}}</a>


    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>

        var app = Vue.createApp({
          
            data: function () {
                return {
                  arr:[1,2,3,4,5,6,7],
                  obj:{
                    name:"zp",
                    age:18,
                    gender:'女'
                  },
                  str: "hello vue!"
                }
            },

        }).mount('#div');

    </script>
</body>

</html>